<template>
  <div class="area">
    <img class="img-icon" src="../../../static/resources/images/loginLogo.png" alt />
    <div class="title">LNNT-变电站智能巡检机器人系统</div>
    <div class="login">
      <div class="head"></div>
      <div class="login-title">登录 Sign In</div>
      <el-form :model="loginForm" :rules="loginRules" ref="loginForm" class="login-form clearfix">
        <div class="item item-left">
          <div class="text">用户名:</div>
          <!-- <i class="icon icon-user"></i> -->
          <!-- <input class="input" type="text" name="user"> -->
          <el-form-item label prop="account">
            <el-input
              placeholder="请输入用户名"
              @keyup.enter.native="handleLogin"
              v-model="loginForm.account"
              maxlength="15"
            ></el-input>
          </el-form-item>
          <i class="icon icon-user"></i>
        </div>
        <div class="item item-right">
          <div class="text">密码:</div>
          <!-- <i class="icon icon-password"></i> -->
          <!-- <input class="input" type="password" name="password"> -->
          <el-form-item label prop="password">
            <el-input
              type="password"
              placeholder="请输入密码"
              @keyup.enter.native="handleLogin"
              v-model="loginForm.password"
              maxlength="15"
            ></el-input>
          </el-form-item>
          <i class="icon icon-password"></i>
        </div>
        <div class="item item-left">
          <el-button class="button button-login" type="button" @click="handleLogin">登录</el-button>
          <el-button class="button button-reset" type="button" @click="handleReset">重置</el-button>
        </div>
        <div class="item item-right">
          <div class="tip-text">{{tip_text}}</div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { uiLogin } from "@/api/authorizationManagement";
import {
  getToken,
  setToken,
  removeToken,
  getUserId,
  setUserId,
  removeUserId
} from "@/utils/auth";
import {
  robotsList,
  robotParams,
  postOperationLogs
} from "@/api/apiManagement";
import {
  asyncRouterMap,
  constantRouterMap,
  navigationRouterMap
} from "@/router";

export default {
  name: "login",
  created() {},
  data() {
    return {
      loginForm: {
        account: "admin",
        password: "123456"
      },
      loginRules: {
        account: [{ required: true, message: "必须填写用户名！" }],
        password: [{ required: true, message: "必须填写密码！" }]
      },
      pwdType: "password",
      loading: false,
      tip_text: ""
    };
  },
  methods: {
    showPwd() {
      if (this.pwdType === "password") {
        this.pwdType = "";
      } else {
        this.pwdType = "password";
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          uiLogin(this.loginForm)
            .then(response => {
              if (response && response.data && response.data.code !== 1) {
                this.loading = false;
                this.tip_text = response.data.message;
                return;
              }
              setToken(response.token);
              setUserId(response.userId);
              // this.$store.dispatch("userInfo", response.admin);
              // localStorage.setItem("ydRobotUserName", response.admin.name);
              // localStorage.setItem("ydRobotUserType", response.admin.type);
              // if (!response.permissions || response.permissions.length === 0) {
              //   var data = JSON.stringify(["home"]);
              //   localStorage.setItem("ydRobotPermissions", data);
              //   this.$store.dispatch("LoginUserPermissions", ["home"]);
              // } else {
              //   var data = JSON.stringify(
              //     response.permissions.map(item => item.sign)
              //   );
              //   localStorage.setItem("ydRobotPermissions", data);
              //   this.$store.dispatch(
              //     "LoginUserPermissions",
              //     response.permissions.map(item => item.sign)
              //   );
              // }

              var permissionKey = response.permissions.map(item => {
                return item.name;
              });
              var permissions = JSON.stringify(permissionKey);
              localStorage.setItem("ydRobotPermissions", permissions);
              this.$store.dispatch("LoginUserPermissions", permissionKey);

              this.getRobotsList();
              // --
              // this.loading = false;
              // this.$router.push({ path: "/monitors/inspection-monitoring" });
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleReset() {
      this.loginForm.password = "";
    },
    getRobotsList() {
      robotsList()
        .then(response => {
          if (response.list && response.list.length > 0) {
            localStorage.setItem("ydRobot_id", response.list[0].id);
            localStorage.setItem(
              "ydRobot_device_id",
              response.list[0].deviceId
            );
            this.getRobotParams({
              page: 1,
              size: 0,
              robotId: response.list[0].id,
              type: 3
            });
            this.loading = false;

            // this.$store.dispatch("BuildRoutes", {}).then(() => {
            var permission = JSON.parse(
              localStorage.getItem("ydRobotPermissions")
            );
            let accessedRouters = this.newFilterAsyncRouter(
              asyncRouterMap,
              permission
            );
            let rev = (array, data, path) => {
              if (data && data.length > 0) {
                data.forEach(item => {
                  if (item.children && item.children.length > 0) {
                    let childrenPath = rev(
                      array,
                      item.children,
                      path + item.path
                    );
                  } else {
                    if (item.name && item.name.length > 0) {
                      path = path + "/" + item.path;
                      array.push(path);
                    }
                  }
                });
              }
            };

            this.setOperationLogs();

            var routers = [];
            rev(routers, accessedRouters, "");
            if (routers.length > 0) {
              if (
                routers.some(
                  item => item.indexOf("/monitors/inspection-monitoring") >= 0
                )
              ) {
                this.$router.push({
                  path: "/monitors/inspection-monitoring"
                });
              } else {
                this.$router.push({ path: routers[0] });
              }
            } else {
              this.$router.push({
                path: "/monitors/inspection-monitoring"
              });
            }
            // });
          }
        })
        .catch(() => {});
    },
    newFilterAsyncRouter(asyncRouterMap, roles) {
      const accessedRouters = asyncRouterMap.filter(route => {
        if (route.children && route.children.length) {
          route.children = this.newFilterAsyncRouter(route.children, roles);
          if (route.children.length == 0) {
            return false;
          } else {
            return true;
          }
        } else {
          if (route.name && route.name.length > 0) {
            return roles.some(key => key === route.name);
          }
          return false;
        }
      });
      return accessedRouters;
    },
    getRobotParams(data) {
      robotParams(data)
        .then(response => {
          if (response.list && response.list.length > 0) {
            var data = JSON.stringify(response.list);
            localStorage.setItem("ydRobot_Connect_info", data);
          }
          // this.loading = false;
          // this.$router.push({ path: "/monitors/inspection-monitoring" });
        })
        .catch(() => {});
    },
    setOperationLogs() {
      var parm = {
        content: "登录系统",
        type: 0
      };
      postOperationLogs(parm)
        .then(response => {})
        .catch(() => {});
    },
    getImg() {}
  }
};
</script>

<style>
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}

.clearfix {
  *zoom: 1;
}

.area {
  position: absolute;
  width: 100%;
  height: 100%;
  min-width: 1280px;
  min-height: 720px;
  /* background: #fff; */
  /* background-color: darkslategray; */
  background-image: url(../../../static/resources/images/loginBackground.jpg);
  background-size: cover;
}

.img-icon {
  position: absolute;
  width: auto;
  height: auto;
  top: 41px;
  left: 60px;
}

.title {
  width: auto;
  height: auto;
  margin-top: 11%;
  margin-bottom: 5%;
  text-align: center;
  font-size: 37px;
  color: #fff;
}

.login {
  width: 570px;
  height: 310px;
  margin: auto;
  /* background-color: darkslategray; */
  background-color: rgb(47, 79, 79, 0.3);
  /* padding: 10px 30px; */
  -webkit-box-shadow: 0px 0px 3px #c8c8c8;
  -moz-box-shadow: 0px 0px 3px #c8c8c8;
  box-shadow: 0px 0px 3px #c8c8c8;
}

.head {
  width: 100%;
  height: 2px;
  margin: auto;
  background-color: rgb(0, 128, 128, 0.3);
  -webkit-box-shadow: 0px 0px 3px #c8c8c8;
  -moz-box-shadow: 0px 0px 3px #c8c8c8;
  box-shadow: 0px 0px 3px #c8c8c8;
}

.login-title {
  width: auto;
  height: auto;
  margin: 26px 36px 12px 36px;
  text-align: left;
  font-size: 26px;
  color: #fff;
}

.login-form {
  width: auto;
  height: auto;
  margin: 12px 36px;
  text-align: left;
  font-size: 28px;
  color: #fff;
}

.item {
  width: 46%;
  height: 110px;
  position: relative;
  display: inline-block;
  /* background-color: #c8c8c8; */
}

.item-left {
  float: left;
}

.item-right {
  float: right;
}

.text {
  width: auto;
  height: 39px;
  margin-top: 18px;
  line-height: 39px;
  font-size: 19px;
  color: lightseagreen;
}

.icon {
  width: 26px;
  height: 26px;
  /* margin: 8px 0 0 3px; */
  position: absolute;
  left: 3px;
  bottom: 15px;
}

.icon-user {
  background-image: url(../../../static/resources/images/user.png);
  background-size: cover;
}

.icon-password {
  background-image: url(../../../static/resources/images/password.png);
  background-size: cover;
}

.login .input,
.login .el-input__inner {
  width: 100%;
  height: 41px;
  line-height: 41px;
  padding-left: 36px;
  font-size: 16px;
  /* background-color: lightseagreen; */
  background-color: rgba(32, 178, 170, 0.3);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C20B2AA,endColorstr=#4C20B2AA);
  border: 0px solid transparent;
  box-sizing: border-box;
  color: white;
}

.button {
  width: 46%;
  height: 41px;
  margin-top: 33px;
  position: relative;
  border: 0px solid transparent;
  box-sizing: border-box;
  color: white;
  font-size: 17px;
}

.button-login {
  float: left;
  /* background-color: goldenrod; */
  background-color: rgba(218, 165, 32, 0.8);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#C8DAA520,endColorstr=#C8DAA520);
}

.button-reset {
  float: right;
  /* background-color: indianred; */
  background-color: rgba(205, 92, 92, 0.8);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#C8CD5C5C,endColorstr=#C8CD5C5C);
}

.button-icon {
  width: 28px;
  height: 28px;
  position: absolute;
  left: 0px;
}

.icon-login {
  background-image: url(../../../static/resources/images/login.png);
  background-size: cover;
}

.icon-reset {
  background-image: url(../../../static/resources/images/reset.png);
  background-size: cover;
}

.tip-text {
  width: 100%;
  height: auto;
  min-height: 41px;
  margin-top: 33px;
  padding: 0 10px;
  /* border: 1px solid lightseagreen; */
  border: 1px solid rgb(32, 178, 170, 0.8);
  border-radius: 8px;
  font-size: 17px;
  line-height: 39px;
  color: rgb(250, 70, 70, 1);
}
</style>
